<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-form-item label="片区" prop="deptId">
        <treeselect v-model="queryParams.deptId" style="width:200px;line-height:34px" size="medium" :options="zoneList" :show-count="true" placeholder="请选择片区" />
      </el-form-item>
      <el-form-item label="猪场名称"  prop="pigfarmName">
        <el-input
          v-model="queryParams.pigfarmName"
          placeholder="请输入猪场名称"
          clearable
          size="medium"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="项目名称"  prop="projectName">
        <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable size="medium" style="width: 240px"/>
      </el-form-item>

      <el-form-item label="建设类型" prop="buildType">
        <el-select v-model="queryParams.buildType" clearable placeholder="请选择" size="medium">
          <el-option label="楼房猪场" value="1"></el-option>
          <el-option label="平房猪场" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="审批状态" prop="status">
        <el-select v-model="queryParams.status" clearable placeholder="请选择" size="medium">
          <el-option label="保存" value="save"></el-option>
          <el-option label="审批中" value="active"></el-option>
          <el-option label="审批完成" value="completed"></el-option>
          <el-option label="作废、取消、删除" value="cancel"></el-option>
          <el-option label="退回、驳回" value="reject"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="立项类型" prop="projectBuildType">
        <el-select v-model="queryParams.projectBuildType" clearable placeholder="请选择" size="medium">
          <el-option label="猪场技改" value="1"></el-option>
          <el-option label="环保技改" value="2"></el-option>
          <el-option label="未批先建" value="3"></el-option>
          <el-option label="数据补录" value="4"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          v-hasPermi="['projectManagement:initiation:add']"
          @click="handleAddFn"
        >新增</el-button>
          <!-- v-hasPermi="['auth:role:add']" -->
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="list"  border size="mini" :height="listHeight || fillHeight('listHeight',['queryForm','add','pagination'],['hamburger-container','tags-view-container'], 130)">
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column label="标题" prop="deptName" :show-overflow-tooltip="true" width="150" >
        <template slot-scope="scope">
          {{scope.row.pigfarmInfo.pigfarmName}}立项申请
        </template>
      </el-table-column>
      <el-table-column label="项目编码" prop="projectNumber" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="项目名称" prop="projectName" :show-overflow-tooltip="true" width="150" align="center"/>
      <el-table-column label="计划开始" prop="beginTime" width="150" align="center"/>
      <el-table-column label="计划结束" prop="endTime" width="150" align="center"/>

      <el-table-column label="片区" prop="pigfarmInfo.deptName" align="center" width="100" />
      <el-table-column label="猪场编码" prop="pigfarmInfo.pigfarmNumber" :show-overflow-tooltip="true" align="center" width="100" />
      <el-table-column label="猪场名称" prop="pigfarmInfo.pigfarmName" align="center" width="180" :show-overflow-tooltip="true" />
      <el-table-column label="立项类型" prop="projectBuildType" align="center" width="130" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <span v-show="scope.row.projectBuildType == '1'">猪场技改</span>
          <span v-show="scope.row.projectBuildType == '2'">环保技改</span>
          <span v-show="scope.row.projectBuildType == '3'">未批先建</span>
          <span v-show="scope.row.projectBuildType == '4'">数据补录</span>
        </template>
      </el-table-column>
      <el-table-column label="建设类型" align="center" width="100" >
        <template slot-scope="scope">
          <span v-show="scope.row.pigfarmInfo.buildType == '1'">楼房猪场</span>
          <span v-show="scope.row.pigfarmInfo.buildType == '2'">平房猪场</span>
        </template>
      </el-table-column>
      <el-table-column label="猪场类型" align="center" width="100" >
        <template slot-scope="scope">
          <span v-show="scope.row.pigfarmInfo.pigfarmType == '1'">繁殖</span>
          <span v-show="scope.row.pigfarmInfo.pigfarmType == '2'">育肥</span>
          <span v-show="scope.row.pigfarmInfo.pigfarmType == '3'">自繁自养</span>
          <span v-show="scope.row.pigfarmInfo.pigfarmType == '4'">GGP</span>
        </template>
      </el-table-column>
      <el-table-column label="规模" prop="pigfarmInfo.scale" align="center" width="150" />
      <el-table-column label="审批状态" prop="status" align="center" width="150" >
        <template slot-scope="scope">
          <span v-show="scope.row.status == '' || scope.row.status == 'save' || scope.row.status == null ">保存</span>
          <span v-show="scope.row.status == 'active'">审批中</span>
          <span v-show="scope.row.status == 'completed'">审批完成</span>
          <span v-show="scope.row.status == 'cancel'">作废、取消、删除</span>
          <span v-show="scope.row.status == 'reject'">退回、驳回</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="申请人" prop="createName" align="center" width="150" /> -->

      <el-table-column label="申请人" prop="createName" align="center" width="200" >
        <template slot-scope="scope">
          {{scope.row.createName}}  {{scope.row.createBy}}
        </template>
      </el-table-column>

      <el-table-column label="立项开始时间" prop="createTime" align="center" width="150" />

      <el-table-column label="立项完成时间" prop="bpmCompleteTime" align="center" width="150" />

      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="200" >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-order"
            @click="handleDetails(scope.row.id)"
          >详情</el-button>

          <el-dropdown style="margin-left: 10px">
            <el-button type="text" size="mini" >
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  v-show=" scope.row.status != 'active' && scope.row.status != 'completed' "
                  v-hasPermi="['projectManagement:initiation:change']"
                  @click="handleChange(scope.row.id)"
                >修改</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" size="small" icon="el-icon-refresh" @click="srmSysnc(scope.row.id)" v-hasPermi="['projectManagement:initiation:sysnc']" v-if="scope.row.status == 'completed'">同步</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  v-show="scope.row.instId"
                  size="mini"
                  type="text"
                  icon="el-icon-s-order"
                  @click="newWindowBpm(scope.row.instId,'1')"
                >审批流程</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  v-show=" scope.row.status != 'active' && scope.row.status != 'completed' "
                  v-hasPermi="['projectManagement:initiation:delete']"
                  @click="handleDelete(scope.row)"
                >删除</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listForm,getTreeselect,delForm,srmSysnc} from "@/api/projectManagement/initiation";
import { roleOption } from "@/api/auth/role";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/auth/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import BaseIndex from '@/views/base/BaseIndex'
import { newWindowBpm } from "@/utils/openBpm";
export default {
  name: "Initiation",
  components: { Treeselect },
  extends: BaseIndex,
  data() {
    return {
      newWindowBpm,
      listHeight:0,
      zoneList:[],
      list:[],
      props:{
        value:'id',
        label:'label'
      }
    };
  },
  watch: {

  },
  created() {
    console.log(this.ids)
    this.getList();

    getTreeselect().then(
      response => {
        if(response && response.code ===0){
          this.zoneList = response.data
        }else{
          this.msgError(response.msg)
        }
        this.loading = false;
      }
    );

  },
  methods: {
    listForm,
    delForm,
    // 同步 数据
    srmSysnc(id){
      this.$confirm('确定是否同步?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.loading = true
        srmSysnc(id).then(
          res => {
            if (res.code==0){
              this.getList()
              this.$message.success('同步成功')
            }else{
              this.$message.warning('同步失败')
            }
            this.loading = false;
          }
        ).catch((err) => {
          this.loading = false;
          this.$message.warning('同步失败')
        })
      }).catch(() => {
      });
    },
    handleChange(id){  // 修改
      this.$router.push({path: "initiationDetails", query: {
        type:'change',
        id
      }});
    },
    handleSubCat(e){
      console.log(e[1])
      this.queryParams.deptId = e[1]
    },
    handleAddFn(){
      this.$router.push({path: "initiationDetails", query: {
        type:'add'
      }});
    },
    handleDetails(id){
      this.$router.push({path: "initiationDetails", query: {
        type:'details',
        id
      }});
    }
  }
};
</script>
